<template>
  <el-container>
    <el-header>
      <div class="head">
        <div>仿知乎专栏</div>
        <div v-if="!token">
          <el-button @click="dl">登陆</el-button>
          <el-button @click="zc">注册</el-button>
        </div>
        <div v-else>
          <el-dropdown @command="handleCommand">
            <el-button plain>
              {{ nickName
              }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="a">我的文章</el-dropdown-item>
                <el-dropdown-item command="b"
                  >退出登录</el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </el-header>
    <el-main>
        <router-view />
    </el-main>
    <el-footer></el-footer>
  </el-container>
</template>
<script>
import { useRouter, useRoute } from "vue-router";
import { ref, reactive, toRefs } from "vue";
import { useStore } from "vuex";
import { ElMessage } from 'element-plus'
import { ArrowDown } from "@element-plus/icons-vue";
export default {
  setup() {
    const router = useRouter();
    const route = useRoute();
    const store = useStore();
    const data = reactive({
      token: localStorage.getItem('token'),
      nickName: "",
    });
    // 跳转登陆页面
    const dl = () => {
      router.push("/login");
    };
    // 跳转注册页面
    const zc = () => {
      router.push("/register");
    };
    if (localStorage.getItem("token")) {
      store.dispatch("getUsersInfo").then((res) => {
        data.nickName = res.data.nickName;
      });
    }
    const handleCommand = (val) => {
    // 退出登录
      if (val == 'b') {
        localStorage.removeItem("token");
        router.push("/");
        data.token=''
        ElMessage.success("退出登录成功")
      }
    };
    return {
      ...toRefs(data),
      dl,
      zc,
      handleCommand,
    };
  },
};
</script>
<style lang="scss">
* {
  padding: 0;
  margin: 0;
}
html,
body {
  width: 100%;
  height: 100%;
  overflow: auto;
}
.el-container{
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.el-header {
  background: #0d6efd;
  color: white;
  .head {
    width: 80%;
    height: 100%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.el-main {
  width: 100%;
  min-height: 600px;
}
.el-footer {
  background: black;
  width: 100%;
}
</style>
